<template>
  <view class="load" v-if="!load">
    <u-loading-icon
      mode="circle"
      inactive-color="#fff"
      text="正在加载..."
      vertical
    ></u-loading-icon>
  </view>
  <view v-else class="user_edit wap">
    <view v-if="!IsFin" class="tip f3">完善个人资料，可以获得1000积分</view>

    <view class="group group_hd">
      <view class="lab"><view class="must">*</view>头像</view>
      <view class="inp_box">
        <button
          class="user_header_btn"
          hover-class="none"
          @click="iscro = true"
        >
          <view class="cover_btn">
            <image
              class="image_user"
              v-if="isHeader"
              @error="isHeader = false"
              :src="reqData.HeadImgUrl"
              mode="aspectFill"
            />
            <image
              class="iamge_icon"
              v-else
              src="@/static/img/hd.png"
              mode=""
            />
          </view>
        </button>
      </view>
    </view>
    <view class="group">
      <view class="lab"><text class="must">*</text>昵称</view>
      <view class="inp_box">
        <input
          type="nickname"
          maxlength="10"
          v-model="reqData.Name"
          placeholder="输入昵称"
        />
      </view>
    </view>
    <view class="group">
      <view class="lab"><text class="must">*</text>绑定手机</view>
      <view class="inp_box">
        <input
          type="text"
          maxlength="16"
          v-model="reqData.Phone"
          placeholder="输入手机号"
        />
        <button
          class="s_btn"
          open-type="getPhoneNumber"
          @getphonenumber="getNums"
        >
          绑定手机
        </button>
      </view>
    </view>
    <view class="group_img">
      <view class="wxlab"
        ><text class="must">*</text>微信设置
        <view class="desc">如果有人想加你微信</view>
      </view>
      <view class="inp_box">
        <input
          type="text"
          maxlength="16"
          v-model="reqData.WechatNo"
          placeholder="输入微信号"
        />
      </view>
    </view>
    <view class="group_check">
      <view class="inp_box_c">
        <view
          ><radio
            value="1"
            :checked="reqData.IsAuditApplyWX == 1"
            @click="radioCheck(1)"
          />直接发送微信号</view
        >
        <view
          ><radio
            value="2"
            :checked="reqData.IsAuditApplyWX == 2"
            @click="radioCheck(2)"
          />需要我同意再发送</view
        >
      </view>
    </view>
    <view class="group">
      <!-- <view class="group" @click="showSex = true"> -->
      <view class="lab"><view class="must">*</view>性别</view>
      <view class="inp_box">
        <input
          type="text"
          v-model="reqData.Sex"
          disabled
          placeholder="选择性别"
          style="margin-right: 20rpx"
        />
      </view>
      <!-- <view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view> -->
    </view>
    <view class="group" @click="showBirthday = true">
      <view class="lab">生日</view>
      <view class="inp_box">
        <input
          type="text"
          v-model="reqData.Birthday"
          disabled
          placeholder="选择生日"
        />
      </view>
      <view class="icon_box"
        ><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons
      ></view>
    </view>
    <view class="group" @click="showCity = true">
      <view class="lab">地区</view>
      <view class="inp_box">
        <input type="text" v-model="cityStr" disabled placeholder="选择地区" />
      </view>
      <view class="icon_box"
        ><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons
      ></view>
    </view>
    <!-- <view class="group" v-if="reqData.Sex=='男'" @click="showIncome = true">
			<view class="lab">年收入</view>
			<view class="inp_box">
				<input type="text" v-model="reqData.Income" disabled="true" placeholder="年收入" />
			</view>
		</view> -->
    <view class="group" v-if="reqData.Sex == '女'">
      <view class="lab">身高</view>
      <view class="inp_box">
        <input type="number" v-model="reqData.Height" placeholder="身高" />
      </view>
      <view class="inp_append">cm</view>
    </view>

    <!-- <view class="group" v-if="reqData.Sex=='女'">
			<view class="lab">体重</view>
			<view class="inp_box">
				<input type="number" v-model="reqData.Weight" placeholder="体重" />
			</view>
			<view class="inp_append">kg</view>
		</view> -->

    <view>
      <view class="lab">个人简介</view>
      <view class="group_textarea">
        <u--textarea
          v-model="reqData.Descript"
          height="80"
          maxlength="200"
          count
          placeholder="写上这个简介,你都比其他优秀啦"
        ></u--textarea>
      </view>
    </view>

    <view class="btn m40" @click="sub">保存</view>

    <u-picker
      :show="showSex"
      immediateChange
      @cancel="showSex = false"
      @confirm="setSex"
      :columns="[['男', '女']]"
    ></u-picker>
    <u-picker
      :show="showIncome"
      immediateChange
      @cancel="showIncome = false"
      @confirm="setIncome"
      :columns="[['100万以下', '100-200万', '200-500万', '500万以上']]"
    ></u-picker>
    <u-datetime-picker
      immediateChange
      ref="datetimePicker"
      @cancel="showBirthday = false"
      :show="showBirthday"
      :minDate="minDate"
      :maxDate="maxDate"
      mode="date"
      v-model="nowDate"
      @confirm="setBirthday"
    ></u-datetime-picker>
    <u-picker
      :show="showCity"
      @cancel="showCity = false"
      immediateChange
      ref="uPicker"
      :columns="cityList"
      @change="changeHandler"
      @confirm="setCity"
    ></u-picker>

    <qfimagecropper
	  :src="reqData.HeadImgUrl"	
      :zIndex="99"
      v-if="iscro"
      :width="666"
      :height="666"
      @crop="cropView"
    ></qfimagecropper>
  </view>
</template>

<script>
import address from "./address.js";
import qfimagecropper from "@/pages/user/components/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue"
export default {
  components: {
    qfimagecropper
  },
  data() {
    let d = new Date("1923/1/1");
    console.log(d);
    let nowD = new Date().getTime();
    return {
      iscro: false,
      IsFin: false,
      load: false,
      cityStr: "",
      cityList: [],
      height: "", // 身高
      weight: "", // 体重
      showCity: false,
      nowDate: nowD,
      minDate: d.getTime(),
      maxDate: nowD,
      showBirthday: false,
      showIncome: false,
      showSex: false,
      user: {},
      isHeader: true,
      reqData: {
        PlayFee: 0,
        IsFee: 0,
        IsOpenMember: "",
        Name: "",
        Phone: "",
        HeadImgUrl: "",
        Descript: "",
        GolfPoint: "",
        Sex: "",
        Province: "",
        City: "",
        Birthday: "",
        BgImg: "",
        UserImgs: "",
        WechatNo: "",
        Income: "",
        Height: "",
        Weight: "",
        IsAuditApplyWX: 0,
      },
    };
  },
  methods: {
    handleCrop(e) {
      console.log(e.tempFilePath);
      uni.previewImage({
        urls: [e.tempFilePath],
        current: 0,
      });
    },
    async FinishedInfo() {
      let res = await this.$api.post("User/IsFinishedInfo");
      if (res.code == 0) {
        this.IsFin = res.data;
      }
    },
    getNowDate12() {
      let now = new Date();
      let year = now.getFullYear();
      let moon = now.getMonth() + 1;
      let day = now.getDate();
      let dateTime = `${year - 12}-${moon < 10 ? "0" + moon : moon}-${
        day < 10 ? "0" + day : day
      }`;
      this.maxDate = new Date(dateTime).getTime();
    },
    radioCheck(e) {
      this.reqData.IsAuditApplyWX = e;
    },
    getNums(e) {
      let _this = this;

      uni.login({
        provider: "weixin",
        success: async (res) => {
          let d = {
            encryptedData: e.detail.encryptedData,
            code: res.code,
            aesIv: e.detail.iv,
          };
          let res3 = await _this.$api.post("User/GetPhoneNumber", d);

          _this.reqData.Phone = res3.data;
        },
        fail: (err) => {
          uni.showModal({
            content: "获取失败",
            showCancel: false,
          });
        },
      });
    },
    lookImg(obj) {
      console.log(obj);
      let ind = 0;
      let lookList = this.localList.map((item, index) => {
        if (item.ID == obj.ID) {
          ind = index;
        }
        return {
          ID: item.ID,
          url: item.netPath || item.ImgPath,
        };
      });
      let urlList = lookList.map((e) => e.url);
      console.log(lookList, ind);

      uni.previewImage({
        current: ind,
        urls: urlList,
      });
    },
    lookImg2(obj) {
      console.log(obj);
      let ind = 0;
      let lookList = this.oldImgeList.map((item, index) => {
        if (item.ID == obj.ID) {
          ind = index;
        }
        return {
          ID: item.ID,
          url: item.netPath || item.ImgPath,
        };
      });
      let urlList = lookList.map((e) => e.url);
      console.log(lookList, ind);

      uni.previewImage({
        current: ind,
        urls: urlList,
      });
    },
    setHYFM(item) {
      this.reqData.UserImgs = item.netPath;
      setTimeout(() => {
        this.$pv.msg("设置成功!");
      }, 500);
    },
    setIncome(e) {
      this.reqData.Income = e.value[0];

      this.showIncome = false;
    },
    async setHD(item) {
      console.log(item.netPath);
      this.reqData.HeadImgUrl = item.netPath;
    },
    setIsOpenMember(e) {
      console.log(e);
      this.reqData.IsOpenMember = e ? 1 : 0;
    },
    setIsFee(e) {
      this.reqData.IsFee = e ? 1 : 0;
    },
    setUserImgs() {
      let _this = this;
      uni.chooseMedia({
        count: 1, //默认9
        mediaType: ["image"],
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: async function (res) {
          console.log(res, "------look");
          let r = await _this.uploading(res.tempFiles[0].tempFilePath);
          _this.reqData.UserImgs = r;
        },
      });
    },
    setName(e) {},
    setPhone(e) {},
    async setBirthday(e) {
      console.log(e.value);
      this.reqData.Birthday = await uni.$u.date(e.value, "yyyy-mm-dd");
      this.showBirthday = false;
    },
    setCity(e) {
      this.reqData.Province = e.value[0];
      if (e.value[1] === "--") {
        this.reqData.City = this.reqData.Province;
        this.cityStr = e.value[0];
      } else {
        this.reqData.City = e.value[1];
        this.cityStr = e.value[0] + " " + e.value[1];
      }
      this.showCity = false;
    },
    setSex(e) {
      this.reqData.Sex = e.value[0];
      this.showSex = false;
    },

    async cropView(e) {
    //   console.log(e, "eeeeeeeeeeee");
		let _this = this;
      let o = {
        ID: "",
        duration: 0,
        fileType: "image",
        tempUrl: e.tempFilePath,
        flieUrl: e.tempFilePath,
        tempKey: uni.$u.guid(8),
        pro: 0,
        netPath: "",
      };

      let r = await _this.uploadingList(
        o.flieUrl,
        o.tempKey,
        new Date().getTime() - 500
      );
      _this.reqData.HeadImgUrl = r;
      _this.isHeader = true;
    },

    async chooseavatar(e) {
      try {
        let _this = this;
        uni.chooseImage({
          count: 1, //默认9
          mediaType: ["image"],
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera", "album"], //从相册选择
          success: async function (res) {
            let o = {
              ID: "",
              duration: 0,
              fileType: "image",
              tempUrl: res.tempFiles[0].path,
              flieUrl: res.tempFiles[0].path,
              tempKey: uni.$u.guid(8),
              pro: 0,
              netPath: "",
            };

            let r = await _this.uploadingList(
              o.flieUrl,
              o.tempKey,
              new Date().getTime() - 500
            );
            _this.reqData.HeadImgUrl = r;
            _this.isHeader = true;
          },
        });
      } catch (error) {
        this.$pv.msg("图片上传失败");
        console.log(error);
      }
    },
    async uploadingList(url, tempKey, timeStamp) {
      this.$pv.load("正在上传");
      const r = await this.$upload(url,()=>{});
	
      this.$pv.closeLoad("");
	  this.iscro = false
      return r;
    },
    async sub() {
      console.log(this.reqData);

      if (!this.reqData.HeadImgUrl) {
        this.$pv.msg("请上传头像");
        return;
      }

      if (!this.reqData.Name) {
        this.$pv.msg("请输入昵称");
        return;
      }
      if (!this.reqData.Phone) {
        this.$pv.msg("请输入手机号");
        return;
      }
      if (!this.reqData.WechatNo) {
        this.$pv.msg("请输入您的微信号");
        return;
      }

      if (!this.reqData.Sex) {
        this.$pv.msg("请选择性别");
        return;
      }

      this.reqData.UserImgs = this.reqData.HeadImgUrl;
      this.$pv.load("正在处理");
      let o = {};
      for (let key in this.reqData) {
        if (this.reqData[key] == "Name") {
          o[key] = this.$util.utf16ToEntities(this.reqData[key]);
        } else if (this.reqData[key] != "") {
          o[key] = this.reqData[key];
        }
      }
      o.Descript = this.$util.utf16ToEntities(this.reqData.Descript);
      let res = await this.$api.post("User/Update", o);
      this.$pv.closeLoad();
      this.$pv.msg("已经保存");
      this.nav_back(1000);
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    changeHandler(e) {
      console.log(e);
      const {
        columnIndex,
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      if (columnIndex === 0) {
        picker.setColumnValues(
          1,
          address[index].children.map((item) => {
            if (item.name == "市辖区" || item.name == "县") {
              return "--";
            } else {
              return item.name;
            }
          })
        );
      }
    },
  },
  async onLoad() {
    this.getNowDate12();
    this.FinishedInfo();
    let u = uni.getStorageSync("user");
    let res = await this.$api.post("User/GetUserInfo", {
      ID: u.UserID,
    });

    this.user = res.data;
    for (let key in this.reqData) {
      this.reqData[key] = this.user[key] || "";
      if (key === "Birthday") {
        let d = new Date(this.reqData[key]);
        this.reqData[key] = this.time = uni.$u.timeFormat(
          d.getTime(),
          "yyyy-mm-dd"
        );
      }
      if (key == "Name") {
        this.reqData[key] = this.$util.entitiesToUtf16(this.user[key]);
      }
      if (key == "Descript") {
        this.reqData[key] = this.$util.entitiesToUtf16(this.user[key]);
      }
    }
    let add = address;
    console.log(add.children);
    let arr1 = add.map((item) => item.name);
    let arr2 = add[0].children.map((item) => {
      if (item.name == "市辖区" || item.name == "县") {
        return "--";
      } else {
        return item.name;
      }
    });
    this.cityList = [arr1, arr2];
    this.load = true;

    uni.$on("user_upload", async (res) => {
      // this.reqData.HeadImgUrl=res.url;
      // this.reqData.UserImgs=res.source;
      console.log(res, " '--------user_upload'");
      let r1 = await this.uploading(res.url);
      console.log(r1, " '--------r1'");
      let r2 = await this.uploading(res.source);
      console.log(r2, " '--------r1'");
      this.reqData.HeadImgUrl = r1;
      this.reqData.UserImgs = r2;
    });
	uni.$on('iscro', async data => {
		this.iscro = data
	})
  },
  onUnload() {
    uni.$off("user_upload");
    uni.$off("iscro");
  },
  watch: {
    "reqData.City": function (newVal) {
      this.cityStr = `${this.reqData.Province} ${this.reqData.City}`;
    },
    reqData: {
      deep: true, //true为进行深度监听,false为不进行深度监听
      async handler(newVal) {
        let o = {};
        for (let key in newVal) {
          if (this.reqData[key] != "") {
            o[key] = this.reqData[key];
          }
        }
        let res = await this.$api.post("User/Update", o);
      },
    },
  },
  onReady() {},
};
</script>

<style lang="scss">
button[plain] {
  border: 0;
}
button::after {
  border: none;
}
.image-cropper {
  z-index: 999 !important;
}
.user_edit {
  padding-bottom: 100rpx;
}

.tip {
  margin-top: 32rpx;
  height: 70rpx;
  background: #fff7e0;
  border-radius: 4rpx;
  color: #e3a029;
  line-height: 70rpx;
  text-align: center;
}

.user_header_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-radius: 0;
}

.user_header,
.cover_btn {
  border-radius: 10rpx;
  overflow: hidden;
  height: 100rpx;
  width: 100rpx;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 0;
  display: flex;
  // text-align: center;
  justify-content: center;
  align-items: center;

  .iamge_icon {
    height: 60rpx;
    width: 60rpx;
  }

  .image_user {
    height: 100%;
    width: 100%;
  }
}

.lab {
  height: 90rpx;
  padding-right: 10rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 90rpx;
  display: flex;
  .must {
    color: #ef4034;
    font-size: 32rpx;
    margin-top: 7rpx;
  }
  .msg {
    display: inline-block;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #dd3232;
  }
}

.group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }

  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;

    input {
      width: 100%;
      text-align: right;
      color: #999999;
      font-size: 32rpx;
    }
    .radio_s {
      display: flex !important;
      height: 100rpx;
    }
    .item_check {
      padding: 10rpx;
      display: flex;
      flex-direction: row;

      .desc {
        color: #000 !important;
      }
    }
  }

  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }

  .inp_append {
    margin-left: 8rpx;
  }

  .s_btn {
    color: #fff;
    font-size: 24rpx;
    width: 170rpx !important;
    height: 60rpx !important;
    border-radius: 5rpx;
    background-color: #0d0d0d;
    margin: 0 0 0 20rpx;
  }
}

.group_check {
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  line-height: 90px;
  height: 190rpx;

  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
      color: #666666;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}
.group_img {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  // line-height: 180rpx;
  height: 90rpx;
  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }
  .wxlab {
    height: 60rpx;
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    line-height: 60rpx;
    .must {
      color: #ef4034;
      font-size: 32rpx;
    }
    .desc {
      color: #dc7e78;
      font-size: 28rpx;
      margin-top: 16rpx;
    }
    .req_t {
      color: #ff557f !important;
    }
  }
  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      text-align: right;
    }
  }
  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}
.group_hd {
  height: auto;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

.m40 {
  margin-top: 50rpx;
}

.group_textarea {
  flex: 1;
  height: 200rpx;
  padding-top: 12rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  // border-style: none;
  background-color: #f8f8f8;
  /deep/ .u-textarea {
    background: none !important;
    // border-bottom: none !important;
    // border-color: rgba(64, 64, 64, 1) !important;
    padding-left: 20rpx;
  }

  /deep/ .u-textarea__count {
    background: none !important;
    color: #999999 !important;
  }

  /deep/ .u-textarea__field {
    color: #111 !important;
  }
}

.inp_box_r {
  display: flex;
  justify-content: flex-end;
}

.text_r {
  text-align: right;
}

.group_warp {
  padding-bottom: 20rpx;
  display: block;
  height: auto;
}

.imgvideo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &::after {
    height: 1px;
    width: 220rpx;
    display: block;
    content: "";
  }

  .item {
    position: relative;
    margin-top: 15rpx;
    width: 220rpx;
    height: 220rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;

    .pro {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
      color: #888;
    }

    image {
      height: 100%;
      width: 100%;
      border-radius: 16rpx;
    }

    .del_con {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      height: 40rpx;
      width: 40rpx;
      text-align: center;
      line-height: 40rpx;
      border-radius: 0 16rpx 0 16rpx;
    }

    .bottomset {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 50rpx;
      background: #404040;
      color: #fff;
      text-align: center;
      align-items: center;
      font-size: 24rpx;
      line-height: 50rpx;
      opacity: 0.7;
    }
  }

  .item_add {
    position: relative;

    &::before,
    &::after {
      display: block;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
      height: 40rpx;
      width: 8rpx;
      border-radius: 8rpx;
      background: #fff;
      border-radius: 10rpx;
    }

    &::before {
      transform: rotate(90deg);
    }
  }
}

.iamge_list_sm {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .tit {
    width: 100%;
    line-height: 2;
  }

  .item {
    height: 90rpx;
    width: 90rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
    background: rgba(254, 240, 188, 0.1);
  }
}
</style>